<template>
  <!-- 需要什么数据 -->
  <el-card shadow="never" class="card_table" :key="tableProps.name" >
    <div class="content-table">
      <el-table ref="multipleTableRef" style="width: 100%" :data="tableData" v-loading="loading" :height="tableHeight"  :header-cell-style="{ fontSize: '14px', backgroundColor:  '#F2F6FF', color: '#000000' }">
        <template v-for="item in tableHeader" :key="item.prop">
          <template v-if="item.type === 'normal'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip> </el-table-column>
          </template>
          <template v-else-if="item.type === 'image'">
            <el-table-column v-bind="item" align="center">
              <template #default="{ row }">
                <el-image v-if="row.productAttachmentList" style="width: 50px; height: auto"
                  :src="row.productAttachmentList[0].attachmentUri"
                  :previewSrcList="[row.productAttachmentList[0].attachmentUri]" fit="cover" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-teleported="true">
                </el-image>
                <span v-else></span>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'custom'">
            <!-- v-bind 会把item 全部动态绑定再ei- item -->
            <el-table-column v-bind="item" align="center">
              <!-- 通过插槽来操作内容 ,尽量不要解构!  所有东西都传递到scope上-->
              <template #default="scope">
                <slot :name="item.slotName" v-bind="scope" :props="item.prop" :slotCode="'这是自定义内容'"></slot>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'handle'">
            <el-table-column v-bind="item" align="center" fixed="right">
              <template #default="scope">
                <slot :name="item.slotName" v-bind="scope" :props="item.prop" :slotCode="'这是自定义内容'"></slot>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column v-bind="item" show-overflow-tooltip align="center" />
          </template>
        </template>
      </el-table>
    </div>

    <div class="pagination-footer">
      <el-pagination size="small" v-model:current-page="pageNum" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"

let pageNum = ref(1) // 当前页码
let pageSize = ref(20) // 每页数据
const props = defineProps({
  tableHeight: {
    type: Number,
    default: 400
  },
  tableData: {
    type: Array as any,
    default: () => []
  },
  pageTotal: {
    type: [Number, String],
    default: 0
  },
  loading: {
    type: Boolean,
    default: false
  },

  tableProps: {
    type: Object,
    default: () => ({
      name: String,
      propsList: {
        type: Array,
        default: () => []
      },
      tableSize: String
    })
  }
})
const tableHeader = computed(() => {
  return props.tableProps.propsList.filter(item => item.hidden)
})

const emit = defineEmits([
  "get-page",
])
// 每页数据
const handleSizeChange = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  emit("get-page", params)
}
// 点击了页面数据
const handleCurrentChange = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  emit("get-page", params)
}
const initPagination = () => {
  pageNum.value = 1
  pageSize.value = 20
}
defineExpose({
  initPagination
})
</script>

<style></style>

<style lang="scss" scope>
.content-table {}

.pagination-footer {
  margin-top: 10px;
  padding: 0px;
  display: flex;
  justify-content: flex-end;
}
</style>